<template>
  <div>
    <a-modal
      :visible="visible"
      :title="title"
      @ok="handleOk"
      @cancel="handleCancel"
       :maskClosable="false"
      :footer="null"
      width='50%'
    >
      <a-row>
        <a-form
          :model="formState"
          name="basic"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          autocomplete="off"
        >
          <a-form-item
            label="用户地址"
            name="publicAddress"
            :rules="[{ required: false, message: '用户地址' }]"
          >
            <a-input v-model:value="formState.publicAddress" readonly />
          </a-form-item>
          <a-form-item
            label="是否会员"
            name="isMember"
            :rules="[{ required: false }]"
          >
            <div>
              {{ formState.isMember == 0 ? "否" : "是" }}
            </div>
            <!-- <a-radio-group v-model:value="" name="radioGroup" disabled="true"  >
                <a-radio value="1">是</a-radio>
                <a-radio value="0">否</a-radio>
              </a-radio-group> -->
          </a-form-item>
        </a-form>
      </a-row>
      <div style="width: 100%">
        <a-table
          :columns="columns"
          :data-source="data"
          :rowKey="
            (record, index) => {
              return record.id;
            }
          "
           :scroll="{ x: 'calc(800px)' }"
          :pagination="pagination"
        >
          <template #pic="{ record }">
            <a-avatar
              :src="showUrl+record.images[0]"
            />
            
          </template>
        </a-table>
      </div>
    </a-modal>
  </div>
</template>
<script>
import { getUserInfo } from "@/api/app.js";
import { defineComponent, ref, reactive, onMounted } from "vue";
import mixin from "@/handler/handler.js";
const columns = [
  {
    title: "商品名称",
    dataIndex: "nft_name",
    key: "nft_name",
  },
  {
    title: "商品图片",
    dataIndex: "age",
    key: "age",
    slots: { customRender: "pic" },
  },
  {
    title: "购买时间",
    dataIndex: "pay_time",
    key: "pay_time",
    align:'center'
  },
  {
    title: "价格",
    dataIndex:"price",
    key: "price",
    align:'center'
  },
];
// const data = [{
//   key: 1,
//   name: 'John Brown',
//   age: 32,
//   address: 'New York No. 1 Lake Park',
//   description: '1',
// }, {
//   key: 2,
//   name: 'Jim Green',
//   age: 42,
//   address: 'London No. 1 Lake Park',
//   description: 'My',
// }, {
//   key: 3,
//   name: 'Joe Black',
//   age: 32,
//   address: 'Sidney No. 1 Lake Park',
//   description: 'My  ',
// }];
export default defineComponent({
  props: {
    model: {
      type: Object,
      default: function () {
        return {};
      },
    },
    title: {
      type: String,
      default: "",
    },
    visible: {
      type: Boolean,
      default: function () {
        return false;
      },
    },
    cid: null,
  },
  emits: {
    "close-modal": null,
  },
  setup(props, context) {
    const { requestSucc, getUrl } = mixin();
    const data = ref([]);
    const showUrl=ref("");
    const showModal = () => {};

    const handleOk = (e) => {};
    const handleCancel = (e) => {
      context.emit("close-modal", false);
    };
    const formState = reactive({
      address: "",
      isMember: "0",
    });

    const onFinish = (values) => {
      console.log("Success:", values);
    };

    const onFinishFailed = (errorInfo) => {
      console.log("Failed:", errorInfo);
    };
    const getDataList = (params) => {
      getUserInfo(params).then((res) => {
        requestSucc(res, (r) => {
          const {
            info: { is_member, publicAddress },
            orderList,
            show_url,
          } = r.result;

          formState.isMember = is_member + "";
          formState.publicAddress = publicAddress;
          data.value = orderList;
          showUrl.value=show_url;
        });
      });
    };
    onMounted(() => {
      getDataList({
        id: props.cid,
      });
    });
    return {
      showModal,
      handleCancel,
      handleOk,
      showUrl,
      formState,
      onFinish,
      onFinishFailed,
      getDataList,
      data,
      columns,
      labelCol: {
        span: 4,
      },
      wrapperCol: {
        style: {
          width: "400px",
        },
      },
      pagination: {
        pageSize: 5, // 默认每页显示数量
      },
    };
  },
});
</script>